<template>
  <div class="banner_bar" :class="{'home': isHome}">
    <div class="app-container">
      <ul class="banner_li clearfix">
        <li class="all-class">
          全部商品分类
          <ul class="classify classifys" :class="{back}" v-if="classifyList.length">
            <li v-for="(classify, index) in classifyList" :key="index">
              <span v-text="classify.name" @click="jumpTo(classify.classId, 1)"></span>
              <div class="classify-childs">
                <div class="classify-childs-first">
                  <div class="clearfix">
                    <div class="classify-childs-sec fl" v-for="(classifyChild, index) in classify.info" v-bind:key="index" @click="jumpTo(classifyChild.keyword, 2, classify.classId)">
                      <img :src="classifyChild.img">
                      <span v-text="classifyChild.keyword"></span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <!-- 行业分类 -->
        <li class="class-item fl selected" :class="{backs}" style="width:161px;position:relative;padding:0;">
          <ul class="classify classifys" :class="{back}" v-if="classifyList.length">
            <li v-for="(classify, index) in classifyList" :key="index">
              <span v-text="classify.name" @click="jumpTo(classify.classId, 1)"></span>
              <div class="classify-childs">
                <div class="classify-childs-first">
                  <div class="clearfix">
                    <div class="classify-childs-sec fl" v-for="(classifyChild, index) in classify.info" v-bind:key="index" @click="jumpTo(classifyChild.keyword, 2, classify.classId)">
                      <img :src="classifyChild.img">
                      <span v-text="classifyChild.keyword"></span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <!-- 首页 -->
        <li @click="getChannel()" class="index" :class="{activeBannerBar: returnIndex == -1 || curIndex == -1}">
          首页
        </li>
        <!-- 主导航 -->
        <li v-for="(mainNav, index) in mainNavList" :class="{activeBannerBar: curIndex == index &&  returnIndex != -1}" :key="index" @click="getChannel(mainNav.chId, index)">{{mainNav.titleName}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { apiIndexClassifyNew } from '../../common/api'
  import { mapActions, mapGetters } from 'vuex'
  import { session } from '../../common/util'

  export default {
    props: {
      returnIndex: {
        type: [Number, String],
        default: ''
      }
    },
    data() {
      return {
        indexLists: ['首页'],
        curIndex: -1 || this.$route.query.cIndex, // 导航焦点，默认选中“首页”
        list: 0,
        classifyList: [],
        back: 'back',
        backs: 'backs',
        param: {
          gcIdThird: '',
          gcIdSecond: '',
          goodsPro: '',
          keyWord: ''
        },
        params: '',
        indexNum: 0
      }
    },
    mounted() {
      if (this.$route.path != '/' && this.$route.path.indexOf('/index/') < 0) {
        this.back = ''
        this.backs = ''
      }
    },
    computed: {
      ...mapGetters(['mainNavList']),
      /**
       * 判断当前是否是首页
       */
      isHome() {
        return this.$route.path.indexOf('/index') >= 0 || this.$route.path == '/'
      }
    },
    created() {
      this.apiIndexNavList(this.$store.getters.industry)
      // 分类接口
      apiIndexClassifyNew().then(data => {
        this.classifyList = data.viewClass || []
        this.list = this.mainNavList.length
      })
      // 判断路由中是否存在导航焦点，若存在，则选中
      if (this.$route.query.cIndex) {
        this.curIndex = this.$route.query.cIndex
      }
    },
    methods: {
      ...mapActions(['apiIndexNavList']),
      /**
       * 跳转到搜索页面
       *
       * @param { Number } key      一级菜单id（如果是二级菜单，则是关键词）
       * @param { Number } num      当前状态
       * @param { Number } parentId 父级id（点击的是二级菜单）
       */
      jumpTo(key, num, parentId) {
        // 先初始化值
        this.param = {
          gcIdFirst: '',
          gcIdThird: '',
          gcIdSecond: '',
          goodsPro: '',
          keyWord: ''
        }

        // 重置搜索的分类是商品
        session.set('search-index', 1)

        // 如果当前是一级菜单
        if (num == 1) {
          window.open(`/search/goods?type=goods&gs=${key || ''}&ob=&page=1`)
          // this.$router.push(`/search/goods?type=goods&gs=${key || ''}&ob=colligate&page=1`)
        // 如果当前是二级菜单
        } else if (num == 2) {
          window.open(`/search/goods?type=goods&key=${key || ''}&gs=${parentId || ''}&ob=&page=1`)
          // this.$router.push(`/search/goods?type=goods&key=${key || ''}&gs=${parentId || ''}&ob=colligate&page=1`)
        }
      },
      getChannel(id, index) {
        // 导航焦点
        if (index == undefined) {
          this.curIndex = -1
        } else {
          this.curIndex = index
        }
        this.$emit('index-number', this.curIndex)
        if (id) {
          this.$emit('on-channel', id)
          this.$router.push(`/index/${id}?cIndex=${index}`)
        } else {
          this.$emit('on-channel')
          this.$router.push('/')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .back {
    display: block  !important;
  }
  .backs {
    background: url('./index_nav_class_bg.png') repeat-x;
  }
  .banner_bar {
    // background: url("./index_nav_bg.png") repeat-x;  
    background: #ffffff;
    border-bottom: 1px solid #ef0384;
    height: 38px;

    .all-class {
      background-color: #ef0384;
      color: #FFFFFF;
      width: 182px;
      position: relative;

      &:hover .classifys {
        background: #ffffff;
        box-shadow: 0px 3px 8px 2px lightgrey;
        display: block;
        width: 182px;
        left: 0px;

        li {
          color: #000000;

          &:hover {
            background-color: #c4c4c4;
          }

          .classify-childs {
            background-color: #f5f5f5;
            left: 182px;
          }
        }
      }
    }

    &.home {
      // border-bottom: 0px;

      .all-class {
        display: none;
      }

      .index {
        margin-left: 171px;
      }
    }
  }
  .banner_li {
    li {
      float: left;
      line-height: 38px;
      font-size: 14px;
      padding: 0 25px;
      color: $color-dark;
      text-align: center;
      cursor: pointer;
      a {
        color: $color-white;
      }
    }
    // 导航焦点 
    .activeBannerBar {
      color: $color-main-light;
    }
  }
  .classify {
    position: absolute;
    z-index: 8;
    height: 420px;
    background-color: rgba(0, 0, 0, .5);
    top: 38px;
  }
  .classifys {
    display: none;
    li {
      &:hover {

        .classify-childs {
          display: block;
        }
      }
      .classify-childs {
        display: none;
        position: absolute;
        left: 160px;
        top: 0px;
        bottom: 0;
        z-index: 10;
        width: 444px;
        background-color: $color-white;
        font-size: 12px;
        overflow: hidden;
        .classify-childs-fir {
          color: #000;
          font-weight: bold;
          vertical-align: top;
          width: 60px;
          text-align: left;
        }
        .classify-childs-sec {
          // width: 400px;
          text-align: center;
          width: 100px;
          margin: 23px 5px;

          img{
            display: inline-block;
            height: 66px;
          }
          span {
            display: block;
            color:$color-black;
            line-height: 12px;
          }
        }
        .classify-childs-dash {
          border-bottom: 1px dashed $border-gray;
          width: 500px;
          margin: 0 auto;
        }
      }
    }
  }
  .selected {
    position: relative;
    &:hover {
      .classifys {
        display: block;
      }
    }
    background: $color-white;
  }
  .classify > li {
    width: 100%;
    height: 42px;
    line-height: 42px;
    color: $color-white;
    cursor: pointer;
  }
  .classify > li:hover {
    background: rgba(255, 255, 255, 0.4);
  }
</style>